<template>
	<view class="v-steps" :class="[direction]">
		<view v-for="(step, index) in steps" :key="index" class="step-item" :class="[getStepStatus(index), { 'last-item': index === steps.length - 1 }]">
			<view class="step-icon-container">
				<view class="step-icon">
					<text v-if="index < active" class="icon-check">✓</text>
					<text v-else-if="index === active" class="step-number">{{ index + 1 }}</text>
					<text v-else class="step-number">{{ index + 1 }}</text>
				</view>
				<view v-if="index !== steps.length - 1" class="step-line"></view>
			</view>
			<view class="step-content">
				<text class="step-title">{{ step.title }}</text>
				<text v-if="step.desc" class="step-desc">{{ step.desc }}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { computed, inject } from 'vue';

interface Step {
	title: string;
	desc?: string;
}

const props = defineProps({
	steps: {
		type: Array as () => Step[],
		required: true
	},
	active: {
		type: Number,
		default: 0,
		validator: (value: number) => value >= 0
	},
	direction: {
		type: String,
		default: 'horizontal',
		validator: (value: string) => ['horizontal', 'vertical'].includes(value)
	}
});
const config = inject<any>('config');
const getStepStatus = (index: number) => {
	if (index < props.active) return 'finished';
	if (index === props.active) return 'active';
	return 'waiting';
};
</script>

<style lang="scss" scoped>
$primary-color: #287afa;
$success-color: #31d283;
$warning-color: #ff9628;
$info-color: #969696;
$text-primary: #333333;
$text-regular: #666666;
$text-placeholder: #c0c4cc;
$border-color: #969696;
$bg-color: #f5f7fa;

.v-steps {
	display: flex;
	width: 100%;
	box-sizing: border-box;

	&.horizontal {
		flex-direction: row;
		justify-content: space-between;
		padding: 16rpx 0;

		.step-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			.step-icon-container {
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				width: 100%;

				.step-line {
					position: absolute;
					left: 72.5%;
					top: 50%;
					transform: translateY(-50%);
					width: calc(100% - 80rpx);
					height: 4rpx;
					background-color: v-bind('config.VSteps.lineBackgroundColor');
					z-index: 1;
				}
			}

			.step-content {
				text-align: center;
				margin-top: 16rpx;
				padding: 0 20rpx;
			}

			&.last-item .step-line {
				display: none;
			}
		}
	}

	&.vertical {
		flex-direction: column;
		padding: 16rpx 0;

		.step-item {
			display: flex;
			position: relative;
			padding-bottom: 40rpx;

			&:last-child {
				padding-bottom: 0;
			}

			.step-icon-container {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 24rpx;

				.step-line {
					flex: 1;
					width: 4rpx;
					background-color: v-bind('config.VSteps.lineBackgroundColor');
					margin-top: 16rpx;
				}
			}

			.step-content {
				flex: 1;
				padding-bottom: 40rpx;
			}

			&.last-item .step-line {
				display: none;
			}
		}
	}

	.step-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 2;
		font-size: 32rpx;
		font-weight: bold;
		background-color: white;
		border: 4rpx solid v-bind('config.border.color');
		color: v-bind('config.fontColor.subTitle');
		transition: all 0.3s ease;

		.step-number {
			line-height: 1;
		}

		.icon-check {
			font-size: 36rpx;
			font-weight: bold;
			line-height: 1;
		}
	}

	.step-title {
		font-size: 32rpx;
		font-weight: bold;
		color: v-bind('config.fontColor.default');
		display: block;
		line-height: 1.4;
	}

	.step-desc {
		font-size: 26rpx;
		color: v-bind('config.fontColor.subTitle');
		display: block;
		margin-top: 8rpx;
		line-height: 1.4;
	}
	.finished {
		.step-icon {
			border-color: v-bind('config.border.color');
			background-color: v-bind('config.backgroundColor.succeed');
			color: white;
		}

		.step-line {
			background-color: v-bind('config.backgroundColor.succeed') !important;
		}

		.step-title {
			color: v-bind('config.fontColor.default');
		}
	}
	.active {
		.step-icon {
			border-color: v-bind('config.border.default');
			background-color: v-bind('config.backgroundColor.default');
			color: white;
		}

		.step-title {
			color: v-bind('config.fontColor.default');
			font-weight: bold;
		}
	}

	.waiting {
		.step-icon {
			border-color: v-bind('config.border.color');
			background-color: white;
			color: v-bind('config.fontColor.text');
		}

		.step-title {
			color: v-bind('config.fontColor.text');
		}

		.step-desc {
			color: v-bind('config.fontColor.text');
		}
	}
}

@media (max-width: 768px) {
	.v-steps.horizontal {
		.step-item {
			.step-content {
				padding: 0 10rpx;
			}

			.step-title {
				font-size: 28rpx;
			}

			.step-desc {
				font-size: 24rpx;
			}
		}
	}
}
</style>
